<template>
  <div class="legend">
    <div
      v-for="(item, index) of legendItems"
      :key="index"
      :class="item.open ? 'tool-item tool-item-open' : 'tool-item'"
      @click="changeAcitve(item)"
    >
      <div class="circle" :class="item.open ? 'green' : 'blue'"></div>
      <div class="img-div">
        <img :src="item.icon" width="28px" height="37px" />
      </div>
      <div class="name">{{ item.displayName }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch } from "vue-property-decorator";
import Template from "./CTemplate.vue";
import store from "~/assets/modules/store";
@Component({ name: "CLegend" })
export default class extends Template {
  get areaType() {
    return this.$store.getters["panelData/areaType"];
  }
  @Watch("areaType")
  handleAreaType() {
    if (this.areaType == "administrative") {
      this.legendItems[this.legendItems.length - 1].open = false;
      if (store.wgfwLayer) {
        store.wgfwLayer.visible = false;
        store.wgfwLabelLayer.visible = false;
      }
    } else {
      this.legendItems[this.legendItems.length - 1].open = true;
      if (store.wgfwLayer) {
        store.wgfwLayer.visible = true;
        store.wgfwLabelLayer.visible = true;
      }
    }
  }
  legendItems = [
    {
      name: "gridman",
      mapLayer:'gridmanLayer', //对应的图层
      type: "gridman",
      displayName: "房管员",
      icon: require("../../assets/images/points/fangguanyuan.png"),
      open: false
    },
    {
      name: "zlxm",
      mapLayer:'zlxmLayer', //对应的图层
      displayName: "租赁项目",
      icon: require("../../assets/images/points/zulinxiangmu.png"),
      open: false
    },
    {
      name: "zlqy",
      mapLayer:'zlqyLayer', //对应的图层
      displayName: "租赁企业",
      icon: require("../../assets/images/points/zulinqi.png"),
      open: false
    },
    {
      name: "jjjg",
      mapLayer:'jjjgLayer', //对应的图层
      displayName: "经纪机构",
      icon: require("../../assets/images/points/jingjijigou.png"),
      open: false
    },
    {
      name: "wgfw",
      mapLayer:'wgfwLayer', //对应的图层
      displayName: "网格范围",
      icon: require("../../assets/images/points/wanggefanwei.png"),
      open: true
    }
  ];
  public created(){
    //切换楼盘信息和网格信息页签的时候，初始显示
    this.legendItems.forEach((item:any)=>{
      let storeData:any = (store as any);
      if(storeData[item.mapLayer]&&storeData[item.mapLayer].visible){
        item.open = true;
      }
    })
  }
  changeAcitve(item: any) {
    item.open = !item.open;
    if (item.name === "gridman") {
      if (store.gridmanLayer) {
        store.gridmanLayer.visible = item.open;
        store.gridmanLayerVisible = item.open;
      }
    } else if (item.name === "zlxm") {
      if (store.zlxmLayer) {
        store.zlxmLayer.visible = item.open;
        store.zlxmLayerVisible = item.open;
      }
    } else if (item.name === "zlqy") {
      if (store.zlqyLayer) {
        store.zlqyLayer.visible = item.open;
        store.zlqyLayerVisible = item.open;
      }
    } else if (item.name === "jjjg") {
      if (store.jjjgLayer) {
        store.jjjgLayer.visible = item.open;
        store.jjjgLayerVisible = item.open;
      }
    } else {
      if (store.wgfwLayer) {
        store.wgfwLayer.visible = item.open;
        store.wgfwLabelLayer.visible = item.open;
        store.wgfwLayerVisible = item.open;
      }
    }
  }
}
</script>

<style lang="scss">
.tool-item {
  position: relative;
  .circle {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
  }
  .green {
    background-color: #0ec7b9;
  }
  .blue {
    background-color: #3998ff;
  }
  .img-div {
    width: 100%;
    height: 47px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .name {
    display: flex;
    justify-content: center;
    padding-top: 5px;
  }
}
.tool-item-open {
  background-color: #0f81ff !important;
}
</style>
